
<template>
	<div id="container">
		<button @click="clickGoodLuck(1)">祈愿1次</button>
		<button @click="clickGoodLuck(10)">祈愿10次</button>
		<button @click="reset()">清空</button>
        <div>{{totoalCount}}</div>
        <div  class="box" >
            <div v-for="(item,index) in luckList" :key="index">
            {{item.text}}
            </div>
        </div>
        
	</div>
</template>
<script>
	export default {
		name: "elect",
		data() {
			return {
				// 抽卡概率属性
				probability_golden: 0.6,	//金卡基础概率
                probability_violet: 5.1,	//紫卡基础概率
				totoalCount: 0,				//总抽卡次数
				accNoGoldenCount: 0, 		//不出金次数
				accNoVioletCount: 0, 		//不出紫次数
				awardColor: "blue",			//出啥颜色卡
                luckList:[],
			};
		},
		methods: {
			// 点击抽卡 1次 or 10次
			clickGoodLuck(times) {
                if (times == 1) {
					this.computeProOne();
                } else {
					this.computeProTen();
				}
            },
			// 抽中金卡，重新初始化
			initAwardedGolden(){
				this.probability_golden = 0.6;
				this.accNoGoldenCount = 0;
				this.awardColor = "golden";
			},
			// 抽中紫卡，重新初始化
			initAwardedViolet(){
				this.probability_violet = 5.1;
				this.accNoVioletCount = 0;
				this.awardColor = "violet";
			},
            reset(){
                this.luckList=[]
            },
			//单抽概率计算
			computeProOne(){
				this.totoalCount++;
                let randomGolden = (Math.random() * 100).toFixed(2);
                let randomNumViolet = (Math.random() * 100).toFixed(2);
				//是否出金 出金大保低
				if(this.accNoGoldenCount>=90){
					console.log("出金啦/大保低：", this.probability_golden, "~" + randomGolden+" 抽卡次数：",this.totoalCount);
					this.luckList.push({
                        text:"出金大保低"
                    })
                    this.initAwardedGolden();
					return;
				}
				//是否出金 出金小保低
				if(this.accNoGoldenCount>=73){
					if (this.probability_golden >= randomGolden) {
						console.log("出金啦/小保低：", this.probability_golden, "~" + randomGolden+" 抽卡次数：",this.totoalCount);
                        this.luckList.push({
                            text:'出金啦/小保低'
                        })
                        this.initAwardedGolden();
						return;
					}else{
						this.probability_golden += 6;
                        
					}
				}
				//是否出金  出金小欧皇
				if(this.accNoGoldenCount<=73){
					if (this.probability_golden >= randomGolden) {
						console.log("出金啦/欧皇：", this.probability_golden, "~" + randomGolden+" 抽卡次数：",this.totoalCount);
						  this.luckList.push({
                            text:'出金啦/欧皇'
                        })
                        this.initAwardedGolden();
						return;
					}
				}
				//是否出紫 
				if(this.probability_violet >= randomNumViolet){
					console.log("出紫/欧皇：", this.probability_violet, "~" + randomNumViolet+" 抽卡次数：",this.totoalCount);
					  this.luckList.push({
                            text:'出紫/欧皇'
                        })
                    this.initAwardedViolet();
				}else{
					this.accNoVioletCount++;
					if(this.accNoVioletCount==8){
						this.probability_violet += 51;
					}
					if(this.accNoVioletCount==9){
						this.probability_violet = 100;
					}
					// 出蓝
					this.awardColor = "blue";
					console.log("出蓝：", this.probability_violet, "~" + randomNumViolet+" 抽卡次数：",this.totoalCount);
                    this.luckList.push({
                            text:'出蓝'
                        })
                }
				this.accNoGoldenCount++;
			},
			//10连概率计算
			computeProTen(){
				for (let i = 0; i < 10; i++) {
					this.computeProOne();
				}
			},
		},
	};
</script>
<style lang="less" scoped>
.box{
    border: 1px solid #000;
    height: 400px;
    overflow: scroll;
}
</style>